<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<meta charset="utf-8">
	<title>恒铸智能柜管理平台</title>
	<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
			<meta name="viewport"
				content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
				<link rel="stylesheet"
					href="${pageContext.request.contextPath}/resources/MUI/css/mui.min.css">
					<link rel="stylesheet"
						href="${pageContext.request.contextPath}/resources/css/zTreeStyle.css"
						type="text/css" />
					<link rel="stylesheet"
						href="${pageContext.request.contextPath}/resources/css/demo.css"
						type="text/css" />
					<script type="text/javascript"
						src="${pageContext.request.contextPath}/resources/js/jquery-1.4.4.min.js"></script>
					<script type="text/javascript"
						src="${pageContext.request.contextPath}/resources/js/jquery.ztree.core.js"></script>
					<script type="text/javascript"
						src="${pageContext.request.contextPath}/resources/js/jquery.ztree.excheck.js"></script>
					<script
						src="${pageContext.request.contextPath}/resources/MUI/js/mui.min.js"></script>
</head>
<style type="text/css">
.compRole select {
	width: 90px !important;
	float: left !important;
}

a {
	text-decoration: none;
}

div.content_wrap {
	width: 220px;
	margin: auto;
	float: none;
	height: 100%;
	margin-top: -10px 0 20px 0;
}

.ztree * {
	font-size: 15px;
}

.ztree li span.button.switch {
	margin-top: 5px;
	height: 23px;
}

.ztree li a {
	margin: 4px;
}

div.zTreeDemoBackground {
	height: 450px;
}

ul.ztree {
	height: 430px;
	border: 1px solid #dadada;
	width: 100vw;
}

div.content_wrap div.left {
	width: 100vw;
	position: relative;
	top: -10px;
}

div.content_wrap {
	float: left;
}

.ztree li span.button {
	zoom: 1.3;
}

.ztree li a {
	margin: 8px;
}

.ztree li span {
	line-height: 20px;
}

.must {
	position: absolute;
	right: 10px;
	top: 14px;
	color: red;
}

.mui-input-group {
	margin-top: 50px;
}
</style>
<body>
	<header class="mui-bar mui-bar-nav"> <a
		class="mui-icon mui-icon-left-nav mui-pull-left"></a>
	<h1 class="mui-title">角色修改</h1>
	</header>
	<form class="mui-input-group">
		<div class="content_wrap">
			<div class="zTreeDemoBackground left" style="margin-bottom: 20px;">
				<ul id="treeDemo" class="ztree"></ul>
			</div>
		</div>
		<div class="mui-input-row">
			<label>角色名称:</label> <input type="hidden" class="roleId"
				name="roleId"> <input type="text" class="roleName"
				name="roleName" placeholder="请输入角色名称"> <span class="must">*</span>
		</div>
		<div class="mui-input-row" style="height: 60xp;">
			<label>备注:</label>
			<textarea name="des" type="text" placeholder="请输入内容" class="des"></textarea>
		</div>
		<div class="mui-button-row">
			<a type="button" class="mui-btn mui-btn-primary submit">提交</a>
		</div>
	</form>
</body>
<script type="text/javascript">
		$(".mui-pull-left").on("touchstart",function(){
			history.back();
		})	
		
		var setting = {};
		var permissionIds="";
		$.get("/main/getRoleTree?roleId="+"${roleId}", function(data) {
			zNodes = data
			//正常加载信息
			if(window.sessionStorage.getItem("asd")) {
				var asd = window.sessionStorage.getItem("asd");
				zNodes = JSON.parse(asd).concat(zNodes); //转换成JSON格式
			}
		
			var setting = {
				check: {
					enable: true
				},
				data: {
					key: {
						title: "t"
					},
					simpleData: {
						enable: true
					}
				},
				callback: {
					onMouseDown: onMouseDown,
					onCheck:onCheck
				}
			};
		
			var log;
		
			function onMouseDown(event, treeId, treeNode) {
				showLog((treeNode ? treeNode.name : "root"), "down");
			}
		
			function showLog(str, logType) {
				log = $("#log" + "_" + logType);
				log.append("<li>" + str + "</li>");
				if(log.children("li").length > 1) {
					log.get(0).removeChild(log.children("li")[0]);
				}
			}
		
			var treeObj;
			$(document).ready(function() {
				treeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
				
				//防止没改权限就点提交使权限变成空
				nodes=treeObj.getCheckedNodes(true);
				for(var i=0;i<nodes.length;i++){
			    	if(null != nodes[i].id){
			    		permissionIds+=nodes[i].id + ",";
			    	}
			    }
			    return permissionIds;
			});
			function onCheck(e,treeId,treeNode){
			    nodes=treeObj.getCheckedNodes(true);
			    
			    //防止重复
			    permissionIds="";
			    for(var i=0;i<nodes.length;i++){
			    	if(null != nodes[i].id){
			    		permissionIds+=nodes[i].id + ",";
			    	}
			    }
			    return permissionIds;
		    }

		})
		
		
		/* --------角色-------------- */
		
		var role = sessionStorage.getItem('role');
		role = JSON.parse(role);
		
		$(".roleId").val(role.roleId);
		$(".roleName").val(role.roleName);
		$(".des").val(role.des);
		
	   $(".submit").on("touchstart",function(){
		    let roleName = $(".roleName").val();
	    	if(roleName !== ""){
				 $.get("/main/upateRole?roleId="+$(".roleId").val()+"&des="+$(".des").val()+"&roleName="+$(".roleName").val()+"&permissions="+permissionIds,
							 function(rest){
						 if(rest.success){
							 mui.toast("修改成功");
						     history.back();
						 }else{
							 mui.toast(rest.message);
						 }
				 })
	    	}else{
	    		mui.toast("带 "+'<span style="color:red;">*</span> 为必填项');
	    	}
	   })
	   
	</script>
</html>